<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/axios.min.js"></script>
    <script src="/js/vue.min.js"></script>
    <script src="/js/jquery-2.1.4.min.js"></script>

</head>
<body>
<div id="div1">
    <button @click="findBookList()">查询用户</button>
    <button @click="findUserList()">查询图书</button>

    <select v-model="userid">
        <option>请选择</option>
        <option v-for="user in userInfoList" v-bind:value="user.userid">{{user.username}}</option>
    </select>


    <select v-model="bid">
        <option>请选择</option>
        <option v-for="book in bookInfoList" v-bind:value="book.bid">{{book.bookname}}</option>
    </select>

    <button @click="addOrder()">确认选择</button>



    <script language="JavaScript">
        var vm = new Vue({
            el: "#div1",
            data: {
                userid: null,
                bid: null,
                bookInfoList: null,
                userInfoList: null
            },
            created() {
                alert(111111);
                this.findBookList();
                this.findUserList();
            },
            methods: {

                //添加订单
                addOrder:function(){
                    alert(vm.userid+"----》"+vm.bid)
                    var path = "/order";
                    var param = {uid:vm.userid,bid:vm.bid};
                    axios.post(path,param).then(function (obj) {
                        if (obj.status == 200) {
                            alert(obj.data)
                        }
                    }).catch(function () {
                        alert("addOrder出错误了");
                    })
                },
                findBookList: function () {
                    alert("执行bookList")
                    axios.get("/book", null).then(function (obj) {
                        if (obj.status == 200) {
                            vm.bookInfoList = obj.data;
                        }
                    }).catch(function () {
                        alert("getBookList()出错了");
                    })
                },

                findUserList: function () {
                    alert("userList")
                    axios.get("/user", null).then(function (obj) {
                        if (obj.status == 200) {
                            vm.userInfoList = obj.data;
                        }
                    }).catch(function () {
                        alert("userInfoList()出错了");
                    })
                }
            }
        })
    </script>
</div>
</body>
</html>


